<template>
  <div class="login">
    <div class="flexcc">
      <div class="login_form">
        <el-form ref="form" :model="form" label-width="80px"  autocomplete="off">
           <div class="login_logo_box">
              <img src="../../static/img/loginlogo.png" alt="" class="login_logo">
           </div>
            <el-form-item>
            <el-input v-model="form.name" placeholder="账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" type="password" placeholder="密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
             <el-button type="primary" @click="login" class="login_btn">登录</el-button>
           </el-form-item>
         </el-form>
      </div>
    </div>
    <div class="img_right">
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "login",
    data() {
      return {
        form:{
          name:"",
          password:""
        },
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {

      login:function(){
        axios.post(`${this.apis}/api/auth/login`,this.form)
        .then(response=> {
          if(response.data.msg.code == 0){



            axios.get(`${this.apis}/api/account/shop/info`)
            .then(response=> {
              if(response.data.msg.code == 0){
                localStorage.setItem('sc_shopid',response.data.data.shop_id)
                this.$router.push({
                  path:"/zhiboxitong/zhiboxiaoshou"
                })
              }else{
                this.$message.error(response.data.msg.info);
              }

            })
          }else{
            this.$message.error(response.data.msg.info);
          }

        })
      }
    }
  }
</script>

<style scoped lang="less">
/deep/ input:-webkit-autofill { box-shadow: 0 0 0px 1000px #E5E5E5 inset !important;}
  .login {

    .login_btn{
      width: 320px;
      height: 50px;
      background: rgb(41, 116, 255);
      border-radius: 8px;
      margin-top: 20px;

    }
    .login_logo_box{
      display: flex;
      justify-content: center;
      margin:0 0  40px 50px;
      .login_logo{
      width: 150px;
      height: 130px;
    }
    }
    .login_form{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 400px;
      height: 600px;
      /deep/ .el-input__inner {
      border: none;
      background:rgba(0, 0, 0,0.1);
      height: 50px;
      border-radius: 8px;

 }
    }
    height: 100vh;
    display: flex;
    min-height: 100vh;
   .img_right{
    background:rgb(255, 255, 255);
    width: 70vw;
    height: 100vh;
    background-image: url('../../static/img/loginImage.png');
    background-size:cover;
   }
    * {
      box-sizing: border-box;
    }

    .flexcc {
      background:#FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
       width: 30vw;
       height:100vh
    }
  }
</style>
